<template>
  <div>
    <h3>>> {{title}}&nbsp;&nbsp;</h3>
  </div>
  <div style="background-color: white;">
    <el-button @click="goback()">返回</el-button>
    <table width="100%" id="read">
      <tbody>
        <tr v-for="(input, index) in datas" :key="index">
          <td  style="width:100px;padding:10px;width:10%">{{fields[index]}}</td>
          <td  style="width:50px;padding:10px;width:80%">{{input}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import {ref, reactive, toRefs, onMounted, readonly} from 'vue';
import { layer } from '@layui/layer-vue'

import {getModelsColume, getModelsData, editModels} from '@/api/model'
import md5 from 'js-md5';
import { useRouter } from 'vue-router'

export default {
  props: {
    modelname: String,
    title: String,
    url: String,
    orderfield: String,
    orderasc: String,
    selectstr: String,
    tableColumns: String,
    id: Number
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
  },
  setup (props){
    const id = props.id;
    const modelname = props.modelname;

    var select = props.selectstr
    var columns = []
    if((select != undefined) && (select != "*")){
      columns = select.split(",")
    }else{
      select = "*"
    }
    columns.push("id")

    const state = reactive({
      datas: new Object(),
      fields: new Object(),
      columns: columns
    })

    const getTableName = () => {
      getModelsColume(modelname).then(res => {
        for (let i = 0; i < res.data.length; i++) {
          let obj = res.data[i];
          if (state.columns.length > 0) {
            if (state.columns.includes(obj.Field)) {
              state.fields[obj.Field] = obj.Comment
            }
          }
        }
      })
      getModelsData(modelname,id).then(res => {
        let obj = res.data[0];
        for(let key in obj){
          if(state.columns.length > 0) {
            if (state.columns.includes(key)) {
              state.datas[key] = obj[key]
            }
          }
        }
      })
    }
    console.log("====================fomr=======================")
    console.log(state)
    onMounted(getTableName)

    return {
      ...toRefs(state),
    }
  }
}
</script>
<style>
#read table {
  border-collapse: collapse; /* 确保边框合并为单一边框 */
}

#read table, #read th, #read td {
  border: 1px dashed #FFB5C5; /* 设置虚线边框 */
}
</style>
